<template>
  <div class="select-filter">
    <div v-if="data.length<=0" class="select-filter__no-data">
      暂无数据
    </div>
    <div v-for="item in data" :key="item.key" class="select-filter__item">
      <div class="select-filter__item-title" :style="{'width':labelWidth+'px'}"><label>{{ item.title }}：</label></div>
      <div class="select-filter__item-options">
        <ul>
          <li :class="{'active':selected[item.key]&&selected[item.key].includes(option.value)}"
              v-for="option in item.options" :key="option.value" @click="select(option, item)">
            <div :class="`layui-tag-size-${props.size}`">
              <lay-icon v-if="option.icon">
                <component :is="option.icon"/>
              </lay-icon>
              <span>{{ option.label }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface SelectFilter {
  data: Array<any>;
  selectedValues: any;
  labelWidth: number;
  outputValueTypeToArray: Boolean;
  size: "lg" | "md" | "sm" | "xs";
}

const emit = defineEmits(['onChange'])
const props = withDefaults(defineProps<SelectFilter>(), {
  selectedValues: {},
  labelWidth: 80,
  size: "md"
});

const selected: Ref<any> = ref({})

watch(() => props.data, (val) => {
  val.forEach(item => {
    selected.value.selected[item.key] = props.selectedValues[item.key] ||
    (Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []
  })
})
const selectedString = computed(() => {
  const outputData = JSON.parse(JSON.stringify(selected.value))
  for (const key in outputData) {
    outputData[key] = outputData[key].join(",")
  }
  return outputData
})

function select(option: any, item: any) {
  //判断单选多选
  if (item.multiple) {
    //如果多选选择的第一个
    if (option.value === item.options[0].value) {
      //就赋值第一个的值
      selected.value[item.key] = [option.value]
    } else {
      //如果选择的值已有
      if (selected.value[item.key].includes(option.value)) {
        //删除选择的值
        selected.value[item.key].splice(selected.value[item.key].findIndex((s: any) => s === option.value), 1)
        //当全删光时，把第一个选中
        if (selected.value[item.key].length == 0) {
          selected.value[item.key] = [item.options[0].value]
        }
      } else {
        //未有值的时候，追加选中值
        selected.value[item.key].push(option.value)
        //当含有第一个的值的时候，把第一个删除
        if (selected.value[item.key].includes(item.options[0].value)) {
          selected.value[item.key].splice(selected.value[item.key].findIndex((s: any) => s === item.options[0].value), 1)
        }
      }
    }
  } else {
    //单选时，如果点击了已有值就赋值
    if (!selected.value[item.key].includes(option.value)) {
      selected.value[item.key] = [option.value]
    } else {
      return false
    }
  }
  change()
}

function change() {
  if (props.outputValueTypeToArray) {
    emit('onChange', selected.value)
  } else {
    emit('onChange', selectedString.value)
  }
}

onMounted(() => {
  //默认赋值
  props.data.forEach(item => {
    selected.value[item.key] = props.selectedValues[item.key] ||
    (Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []
  })
})
</script>

<style lang="less" scoped>
.select-filter {
  --select-filter-border-radius:var(--global-border-radius);
  width: 100%;
}

.select-filter__item {
  display: flex;
}

.select-filter__item-title {
  width: 80px;
}

.select-filter__item-title label {
  padding-top: 13px;
  display: inline-block;
  color: #999;
}

.select-filter__item-options {
  flex: 1;
  border-bottom: 1px dashed var(--global-info-color);
}

.select-filter__item-options ul {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
}

.select-filter__item-options li {
  list-style: none;
  cursor: pointer;
  border-radius: var(--select-filter-border-radius);
  margin: 0 10px 10px 0;
  padding: 0 8px;
  display: flex;
  align-items: center;
  background: var(--global-neutral-color-2);
}

.select-filter__item-options li .el-icon {
  margin-right: 3px;
  font-size: 16px;
}

.select-filter__item-options li:hover {
  color: var(--global-primary-color);
}

.select-filter__item-options li.active {
  background: var(--global-primary-color);
  color: #fff;
  font-weight: bold;
}

.select-filter__item:last-of-type .select-filter__item-options {
  border: 0;
}

.select-filter__no-data {
  color: #999;
}
</style>
